<template>
  <gg-form-item :label="label" :message="message" :messageDisplay="messageDisplay" :labelWidth="localLabelWidth" :layout="localLayout" :isIcon="true"
    :iconTop="iconTop">
    <view class="gg-picker">
      <picker class="gg-picker-item" mode="multiSelector" :range="range_data" range-key="text" :value="items_index" @change="bindPickerChange"
        @columnchange="bindPickerColumnchange" @cancel="onCancel" @click="changeIconTop">
        <view class="gg-picker-item-text" v-if="localVal.length > 0">
          {{last_range_data[0][lastRetDataIndex[0]].text}}{{joint||' '}}{{last_range_data[1][lastRetDataIndex[1]].text}}{{joint||' '}}
          {{last_range_data[2][lastRetDataIndex[2]].text}}
        </view>
        <view class="gg-picker-item-placeholder" v-else>{{placeholder}}</view>
      </picker>
    </view>
  </gg-form-item>
</template>

<script>
import MixinsPicker from '../mixins/mixins-picker.js';
import province from '../dict/area-province.js';
import city from '../dict/area-city.js';
import county from '../dict/area-county.js';
export default {
  mixins: [MixinsPicker],
  name: "GgPickerRegion",
  props: {
    //默认输入框内容
    value: {
      type: Array,
      default: () => { }
    },
    dataType: {
      type: String,
      default: 'text'
    },
    joint: {
      type: String,
      default: ''
    }
  },
  watch: {
    value(newVal) {
      this.localVal = newVal;
      this.itemsSortOut();
    },
  },
  data() {
    return {
      iconTop: false,
      localVal: '',
      range_data: [],//弹窗临时数组
      last_range_data: [],//最终显示页面数组
      items_index: [0, 0, 0],//当前下标
      lastRetDataIndex: [0, 0, 0],// 最终确定选中的下标
      localDataType: 'text',
      dataValue: 'value',
      dataText: 'label',
      localProvince: {},
      localCity: {},
      localCounty: {},
    };
  },
  created: function () {
    this.localVal = this.value;
    this.localDataType = this.dataType != 'value' ? 'text' : 'value';
    this.itemsSortOut();

  },
  methods: {
    initReginData(data) {
      let localData = [];
      for (const key in data) {
        localData.push({
          text: data[key],
          value: key
        })
      }
      return localData
    },
    itemsSortOut: function () {
      const localProvince = this.initReginData(province);
      this.localProvince = localProvince;
      const localCity = this.initReginData(city);
      this.localCity = localCity;
      const localCounty = this.initReginData(county);
      this.localCounty = localCounty;

      //一级固定为省级列表
      this.range_data[0] = localProvince;
      //省级默认值
      this.lastRetDataIndex[0] = this._getKey(this.range_data[0], this.localVal[0]);

      //筛选二级列表
      this.range_data[1] = this._screenRegion(localCity, this.range_data[0][this.lastRetDataIndex[0]].value, 2);
      //市级默认值
      this.lastRetDataIndex[1] = this._getKey(this.range_data[1], this.localVal[1]);

      //筛选三级列表
      this.range_data[2] = this._screenRegion(localCounty, this.range_data[1][this.lastRetDataIndex[1]].value, 4);

      //区县级默认值
      this.lastRetDataIndex[2] = this._getKey(this.range_data[2], this.localVal[2]);

      this.last_range_data = [...this.range_data];
      this.items_index = [...this.lastRetDataIndex];
    },
    _screenRegion(date, star, length) {
      let localData = [];
      for (const key in date) {
        if (date[key].value.substr(0, length) == star.substr(0, length)) {
          localData.push(date[key]);

        }
      }
      return localData;
    },
    /* 获取默认值的key */
    _getKey(data, localValue) {
      let localKey = 0
      if (localValue) {
        /* 便利省级列表 找出省级的位置 */
        for (const key in data) {
          if (localValue == data[key][this.localDataType]) {
            localKey = parseInt(key);
          }
        }
      }
      return localKey
    },
    bindPickerChange: function (e) {
      let items_index = e.detail.value;
      this.items_index = items_index;
      this.updatelocalVal();
      this.iconTop = false
    },
    /* 取消选择 */
    onCancel(e) {
      this.iconTop = false
      this.range_data = [...this.last_range_data];
      this.items_index = [...this.lastRetDataIndex];
    },
    bindPickerColumnchange: function (e) {
      let items_index = this.items_index
      let range_data = this.range_data;
      if (e.detail.column == 2) {
        //滑动三级
        items_index[2] = e.detail.value;
      } else if (e.detail.column == 1) {
        //滑动二级
        items_index[1] = e.detail.value;
        items_index[2] = 0;
        //更新区级列表
        //this.range_data[2] = this._screenRegion(this.localCounty, this.range_data[1][this.items_index[1]].value, 4);
        this.$set(this.range_data, 2, this._screenRegion(this.localCounty, this.range_data[1][this.items_index[1]].value, 4))
      } else if (e.detail.column == 0) {
        //滑动一级
        items_index[0] = e.detail.value;
        items_index[1] = 0;
        items_index[2] = 0;
        //更新市级列表
        // this.range_data[1] = this._screenRegion(this.localCity, this.range_data[0][this.items_index[0]].value, 2);
        this.$set(this.range_data, 1, this._screenRegion(this.localCity, this.range_data[0][this.items_index[0]].value, 2));
        //更新区级列表
        // this.range_data[2] = this._screenRegion(this.localCounty, this.range_data[1][this.items_index[1]].value, 4);
        this.$set(this.range_data, 2, this._screenRegion(this.localCounty, this.range_data[1][this.items_index[1]].value, 4));
      }
      this.items_index = items_index;
      //this.$forceUpdate()
      // this.updateInput();
    },
    updatelocalVal() {
      let items_index = this.items_index;
      this.last_range_data = [...this.range_data];
      this.lastRetDataIndex = [...items_index]
      let value = [];
      let items = this.items;
      if (this.localDataType == 'text') {
        value[0] = this.range_data[0][items_index[0]].text;
        value[1] = this.range_data[1][items_index[1]].text;
        value[2] = this.range_data[2][items_index[2]].text;
      } else {
        value[0] = this.range_data[0][items_index[0]].value;
        value[1] = this.range_data[1][items_index[1]].value;
        value[2] = this.range_data[2][items_index[2]].value;
      }
      this.$emit('input', value);
    }
  }
};
</script>

<style>
.gg-picker {
  min-height: 35px;
}
.gg-picker-item {
  height: 35px;
  line-height: 35px;
  float: left;
  /* display: flex;微信小程序不加这个 */
  margin-right: 10px;
  width: 100%;
}
.gg-picker-item-placeholder {
  color: grey;
}
</style>